<template>

     <div>
        <p>　{{name}}　</p>
  <button @click="say()">点击</button>
     </div>
</template>

<script>
export default {
  name: 'App',
  // setup 函数是 vue3 中专门为组件提供的新属性。 统一的入口
  // 他是在生命周期beforecreate之前触发的 ，所以不能拿到this,也就是说无法使用data和 methods数据和方法
  setup() {
    console.log("运行了 setup");

    // 定义变量
    let name = '张三'

    // 方法
    const say=()=>{
      console.log('你好我是'+name);
    }

    //　在setup中定义的属性和方法是需要 return 出去的，这样我们就可以在模板中直接访问对象的属性和方法了

    return {name,say}
  },
 
  beforeCreate(){
    console.log("运行了 beforCreate");
    
  }
}
</script>
